import { defineComponent, PropType, ref, computed, onMounted } from "vue"
import SubList from "../sublist/SubList"
import { SubListState, TableColumn } from '../sublist/type'
import { BpmnStore } from '../../bpmn/store'

interface Params {
  paramName: string,
  paramNameCn: string,
  type: string,
  defaultValue: string
}

export default defineComponent({
  name: 'SvcParamsEditor',
  props: {
    modelValue: {
      type: String as PropType<string>,
      default: () => ''
    },

    inParams: {
      type: Array as PropType<Params[]>,

    }
  },
  setup(props, { emit }) {
    const data = computed({
      get: () => {
        try {
          return JSON.parse(props.modelValue)
        } catch (e) {
          return []
        }
      },
      set: (val) => {
        emit('update:modelValue', JSON.stringify(val))
      }
    })
    const columns: Array<TableColumn> = [
      {
        label: '节点',
        prop: 'taskId',
        align: 'center',
        formatter: (row: any, column: any): string => {
          if (row[column.property] === '') {
            return '默认节点'
          }
          const el = els.value?.filter((item) => item.value === row[column.property])[0]
          return el ? `${el.label}(${el.value})` : '未知节点'
        },
        editComponent: function (scope: any, state: SubListState<any>): JSX.Element {
          return (
            <el-form-item
              size="small"
              class="sublist-form-item"
              label={scope.column.name}
              prop={scope.column.property}
            >
              <el-select v-model={state.editItem.taskId}>
                <el-option label='默认节点' value='' />
                {els.value.map((option) => {
                  return (
                    <el-option key={option.value} label={`${option.label}(${option.value})`} value={option.value} />
                  );
                })}
              </el-select>
            </el-form-item>
          );
        },
      },
      { label: '源参数(FROM)', prop: 'from', align: 'center', },
      {
        label: '目标参数(TO)',
        prop: 'to',
        align: 'center',
        formatter: (row: any, column: any): string => {
          const el = props.inParams?.filter((item) => item.paramName === row[column.property])[0]
          return el ? el.paramNameCn ? `${el.paramNameCn}` : el.paramName : ''
        },
        editComponent: function (scope: any, state: SubListState<any>): JSX.Element {
          return (
            <el-form-item
              size="small"
              class="sublist-form-item"
              label={scope.column.name}
              prop={scope.column.property}
            >
              <el-select v-model={state.editItem.to}>
                {props.inParams?.map((option) => {
                  return (
                    <el-option key={option.paramName} label={option.paramNameCn} value={option.paramName} />
                  );
                })}
              </el-select>
            </el-form-item>
          );
        },
      }
    ]
    const els = ref([]) // 与当前元素左侧连线的元素列表
    
    // 获取当前节点之前的节点
    const initPrevious = (element) => {
      getPrevEl(element)
    }

    const getPrevEl = (element) => {
      if (Reflect.has(element, 'incoming')) {
        const el = element.incoming[0].sourceRef
        if (el.$type === 'bpmn:StartEvent') {
          return // 到了开始节点 结束递归
        } else if (el.$type === 'bpmn:ServiceTask') {
          els.value.push({ value: el.id, label: el.name })
        }
        getPrevEl(el)
      }
    }

    const init = () => {
      const active = BpmnStore.getActiveElement().element?.di?.bpmnElement
      initPrevious(active)
    }

    onMounted(() => {
      init()
    })

    return () => <el-form label-position="top">
      <el-form-item label="入参设置">
        <SubList
          v-model={data.value}
          columns={columns}
          style="width:100%"
        />
      </el-form-item>
    </el-form>
  }
})